<template>
	<div id='main-webpack'>
		<template v-if="showCalc">
			<!-- <img src="../../src/images/tangcusuan.png"/>记账： -->
			<p class="head">{{today}}</p>
			<div class="contain">
				<div>
					<section>
						<table>
							<tr>
								<th>类型</th>
								<th>支出</th>
							</tr>
							<tr v-for="(item, index) in count" :key="index">
								<td>
									<input type="text" />
								</td>
								<td>
									<input type="text" class="price"/>
									<span @click="deleteItem">删除</span>
								</td>
							</tr>
						</table>
					</section>
				</div>
			</div>
			<p class="footer">
				<button @click="add">添加</button><button @click="showDialog">完成</button>
			</p>
			<div class="dialog" v-if="dialogVisible">
				<div class="content">
					<h1>{{today}} 支出：</h1>
					<h2>{{price}} 元</h2>
				</div>
			</div>
		</template>
		<div class="dialog init" v-else @click="showCalc = true">
			<div class="content">
				<h1>记录北漂花费</h1>
				<h2>第 {{num}} 天</h2>
			</div>
		</div>
	</div>
	
</template>

<script lang='ts'>
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop,Watch } from 'vue-property-decorator'
// require('./test.tt');
let date = new Date();
@Component({})
export default class App extends Vue {
	
	today: string =` ${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;

	count: number[] = [1];
	add (): void {
		this.count.push(Math.random());
	}
	deleteItem (index: number): void {
		this.count.splice(index, 1);
	}

	dialogVisible: boolean = false;
	price:number = 0;
	showDialog (): void {
		let nodes = document.querySelectorAll('.price');
		Array.from(nodes).forEach(item => {
			this.price = +(item as HTMLInputElement).value + this.price;
		})
		
		this.dialogVisible = true;
	}

	showCalc: boolean = false;

	num: number = Math.floor((Date.now() - new Date('2022/03/14').getTime()) / 24 / 60 / 60 / 1000);
}

</script>
<style lang="css">
.left-list{
 font(20px, green);
}
</style>

<style lang='scss'>
@import './src/css/main.scss';
html,body,div,p{
	margin: 0;
	padding: 0;
}
#main-webpack{
	height: 100vh;
	width: 100vw;
	background-image: url('../bg.png');
	background-size: cover ;
	.head{
		position: fixed;
		height: 50px;
		line-height: 50px;
		width: 100%;
		font-size: 20px;
		font-weight: 500;
		text-align: center;
		img{
			height: 44px;
			width: 87px;
			vertical-align: middle;
			margin-right: 120px;
		}
	}
	.contain{
		display: flex;
		justify-content: center;
		padding-top: 50px;
		>div{
			display: flex;
   			align-items: center;
			width: 500px;
			margin-top: 20px;
			height: calc(100vh - 120px);
			overflow: auto;
			background-color: rgba(255,255,255,.8);
			box-shadow: 0 0 3em 6em rgb(255 255 255 / 80%);
			section{
				max-height: calc(100vh - 120px);
			}
			table{
				table-layout: fixed;
				width: calc(100% - 60px);
				th,td{
					width: calc(50% - 30px);
					padding: 5px;
				}
				input{
					height: 30px;
					width: calc(100% - 20px);
					font-size: 20px;
				}
				tr{
					td{
						&:nth-child(2){
							position: relative;
							span{
								position: absolute;
								right: -50px;
								cursor: pointer;
							}
						}
					}
				}
			}
		}
	}
	.footer{
		bottom: 0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		button{
			margin: 0 10px;
		}
	}
}
.dialog{
	display: flex;
    justify-content: center;
    align-items: center;
	position: fixed;
    top:0;
	left: 0;
	right: 0;
	bottom: 0;
    background: rgba(29, 48, 50, 0.5);
	.content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 300px;
        background-color: rgba(255,255,255,.9);
		box-shadow: 0 0 3em 6em rgb(255 255 255 / 90%);
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 16px;
		h1{
			font-size: 40px;
		}
		h2{
			font-family: cursive;
			font-size: 80px;
			margin-top: 0;
		}
	}
}
.init{
	background: rgba(29, 48, 50, 0.2);
	font-weight: 500;
	h1{
		letter-spacing: 4px;
	}
	h2{
		font-family: cursive;
		font-size: 30px !important;
	}
}
</style>
